<template>
  <div class="receipt-upload-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>电子凭证采集</span>
      </div>
      
      <el-form :model="receiptForm" :rules="receiptRules" ref="receiptFormRef" label-width="100px">
        <el-form-item label="报销人" prop="userName">
          <el-input v-model="receiptForm.userName" placeholder="请输入报销人姓名"></el-input>
        </el-form-item>
        
        <el-form-item label="部门" prop="department">
          <el-select v-model="receiptForm.department" placeholder="请选择部门">
            <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="招待日期" prop="date">
          <el-date-picker
            v-model="receiptForm.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item label="招待事由" prop="reason">
          <el-input v-model="receiptForm.reason" type="textarea" placeholder="请输入招待事由"></el-input>
        </el-form-item>
        
        <el-form-item label="招待金额" prop="amount">
          <el-input v-model="receiptForm.amount" placeholder="请输入招待金额">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        
        <el-form-item label="支付凭证" prop="paymentReceipt">
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="uploadPaymentReceipt"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="paymentReceiptList"
            :on-exceed="handleExceed"
            :on-remove="handleRemovePayment">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="发票" prop="invoice">
          <el-upload
            class="upload-demo"
            action="#"
            :http-request="uploadInvoice"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="invoiceList"
            :on-exceed="handleExceed"
            :on-remove="handleRemoveInvoice">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过5MB</div>
          </el-upload>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ReceiptUpload',
  data() {
    return {
      loading: false,
      receiptForm: {
        userName: '',
        department: '',
        date: '',
        reason: '',
        amount: '',
        paymentReceipt: null,
        invoice: null
      },
      receiptRules: {
        userName: [
          { required: true, message: '请输入报销人姓名', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        date: [
          { required: true, message: '请选择招待日期', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请输入招待事由', trigger: 'blur' }
        ],
        amount: [
          { required: true, message: '请输入招待金额', trigger: 'blur' },
          { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
        ],
        paymentReceipt: [
          { required: true, message: '请上传支付凭证', trigger: 'change' }
        ],
        invoice: [
          { required: true, message: '请上传发票', trigger: 'change' }
        ]
      },
      departmentOptions: [
        { value: '财务部', label: '财务部' },
        { value: '人力资源部', label: '人力资源部' },
        { value: '市场部', label: '市场部' },
        { value: '技术部', label: '技术部' },
        { value: '运营部', label: '运营部' }
      ],
      paymentReceiptList: [],
      invoiceList: []
    }
  },
  methods: {
    // 上传前验证
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isPDF = file.type === 'application/pdf'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isJPG && !isPNG && !isPDF) {
        this.$message.error('上传文件只能是 JPG/PNG/PDF 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        return false
      }
      return true
    },
    
    // 上传支付凭证
    uploadPaymentReceipt(params) {
      this.receiptForm.paymentReceipt = params.file
      this.paymentReceiptList = [{
        name: params.file.name,
        url: URL.createObjectURL(params.file)
      }]
    },
    
    // 上传发票
    uploadInvoice(params) {
      this.receiptForm.invoice = params.file
      this.invoiceList = [{
        name: params.file.name,
        url: URL.createObjectURL(params.file)
      }]
    },
    
    // 移除支付凭证
    handleRemovePayment() {
      this.receiptForm.paymentReceipt = null
      this.paymentReceiptList = []
    },
    
    // 移除发票
    handleRemoveInvoice() {
      this.receiptForm.invoice = null
      this.invoiceList = []
    },
    
    // 超出上传数量限制
    handleExceed() {
      this.$message.warning('最多只能上传1个文件')
    },
    
    // 提交表单
    submitForm() {
      this.$refs.receiptFormRef.validate(async valid => {
        if (!valid) return
        
        if (!this.receiptForm.paymentReceipt) {
          this.$message.error('请上传支付凭证')
          return
        }
        
        if (!this.receiptForm.invoice) {
          this.$message.error('请上传发票')
          return
        }
        
        this.loading = true
        
        // 构建表单数据
        const formData = new FormData()
        formData.append('userName', this.receiptForm.userName)
        formData.append('department', this.receiptForm.department)
        formData.append('date', this.receiptForm.date)
        formData.append('reason', this.receiptForm.reason)
        formData.append('amount', this.receiptForm.amount)
        formData.append('paymentReceipt', this.receiptForm.paymentReceipt)
        formData.append('invoice', this.receiptForm.invoice)
        
        try {
          // 模拟API请求
          setTimeout(() => {
            this.$message.success('凭证上传成功，已提交至智能票据鉴真中心进行验证')
            this.resetForm()
            this.loading = false
          }, 1500)
          
          // 实际项目中应该是这样的API调用
          // const { data } = await this.$http.post('/receipt/upload', formData)
          // if (data.code === 0) {
          //   this.$message.success('凭证上传成功，已提交至智能票据鉴真中心进行验证')
          //   this.resetForm()
          // } else {
          //   this.$message.error(data.message || '上传失败')
          // }
        } catch (error) {
          this.$message.error('上传失败，请重试')
        } finally {
          this.loading = false
        }
      })
    },
    
    // 重置表单
    resetForm() {
      this.$refs.receiptFormRef.resetFields()
      this.receiptForm.paymentReceipt = null
      this.receiptForm.invoice = null
      this.paymentReceiptList = []
      this.invoiceList = []
    }
  }
}
</script>

<style scoped>
.receipt-upload-container {
  padding: 20px 0;
}
</style> 